<template>
	<view class="smain">
		<!-- 单点评吸 {{id}} -->
		<view class="table">
			<view class="tabHead">
				<view class="left">
					<div class="top">
						<view class="tit">项目</view>
					</div>
					<div class="bot">
						<view class="p p1">样品 编号</view>
						<view class="p p2">牌别</view>
					</div>
				</view>
				<view class="list">
					<view class="item" v-for="(item,index) in tabHead" :key="item">
						<view class="top">
							<view class="tit">{{item}}</view>
						</view>
						<view class="box">
							<view class="i">Ⅰ</view>
							<view class="i">Ⅱ</view>
							<view class="i">Ⅲ</view>
							<view class="i">{{index==0?5:index==1?32:index==2?6:index==3?12:index==4?20:index==5?25:'-'}}</view>
							<view class="i">{{index==0?4:index==1?28:index==2?5:index==3?10:index==4?17:index==5?22:'-'}}</view>
							<view class="i">{{index==0?3:index==1?24:index==2?4:index==3?8:index==4?15:index==5?20:'-'}}</view>
						</view>
					</view>

				</view>
				<view class="right">
					<div class="top">
						<view class="tit" style="text-align: right;padding-right: 1rpx;">合计</view>
					</div>
				</view>
			</view>


			<uni-table class="tableData noT" :stripe="false" emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr v-for="item in tableHeadData" :key="item.id">
					<uni-th width="133rpx" class="cFont" align="center">
						<view style="display: flex;width: 100%;padding: 0 6rpx;">
							<view style="width: 30rpx;">{{item.number}}</view>
							<view style="flex: 1;">{{item.allowanceName}}</view>
						</view>
					</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeGloss}}</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeAroma}}</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeHarmony}}</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeImpure}}</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeThrill}}</uni-th>
					<uni-th width="75.77rpx" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeAftertaste}}</uni-th>

					<uni-th width="auto" class="cFont"
						align="center">{{item.meetingMonthlyCorrelationRep.smokeTotal}}</uni-th>
				</uni-tr>





				<!-- 表格数据行 -->
				<uni-tr v-for="(item,index) in tableData" :key="item.id">
					<uni-td>
						<view class="td" style="display: flex;">
							<view style="width: 30rpx;">{{item.number}}</view>
							<view style="flex: 1;">{{item.allowanceName}}</view>
						</view>
					</uni-td>

					<uni-td>
						<view class="td">
							<!-- <uni-easyinput class="transparent-input" :errorMessage="false"
								v-model="item.meetingMonthlyCorrelationRep.smokeGloss" :data-index="index"
								placeholder="请输入内容" @input="change"></uni-easyinput> -->
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeGloss" required></input> -->
								<u-input border="surround" inputAlign="center" fontSize="16px" 
								 type="number" @blur="smokeGlossBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
								    v-model="item.meetingMonthlyCorrelationRep.smokeGloss" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeAroma"></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px" 
							type="number" @blur="smokeAromaBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
								v-model="item.meetingMonthlyCorrelationRep.smokeAroma" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeHarmony"></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px" 
							type="number" @blur="smokeHarmonyBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
								v-model="item.meetingMonthlyCorrelationRep.smokeHarmony" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeImpure"></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px"
							 type="number" @blur="smokeImpureBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
								v-model="item.meetingMonthlyCorrelationRep.smokeImpure" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeThrill"></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px"
							 type="number" @blur="smokeThrillBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
									v-model="item.meetingMonthlyCorrelationRep.smokeThrill" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- <input class="transparent-input" @input="change" :data-index="index"
								v-model="item.meetingMonthlyCorrelationRep.smokeAftertaste"></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px" 
							 type="number" @blur="smokeAftertasteBlur(item)" :disabled="item.meetingMonthlyCorrelationRep.status=='1'"
									v-model="item.meetingMonthlyCorrelationRep.smokeAftertaste" ></u-input>
						</view>
					</uni-td>
					<uni-td>
						<view class="td">
							<!-- {{item.meetingMonthlyCorrelationRep.smokeTotal}} -->
							<!-- <input class="transparent-input" v-model="item.meetingMonthlyCorrelationRep.smokeTotal"
								@input="change" :data-index="index" disabled></input> -->
							<u-input border="surround" inputAlign="center" fontSize="16px" disabled
									v-model="item.meetingMonthlyCorrelationRep.smokeTotal" ></u-input>
						</view>
					</uni-td>
				</uni-tr>

			</uni-table>


		</view>


		<view class="btns">
			<view class="btn" v-if="submitName=='提交'" @click="submit">{{submitName}}</view>

			<!-- <view class="btn">选中效果</view> -->
		</view>
		
		<u-modal :show="tipShow" title="提示" :content='tipText'  
		width="300px" owCancelButton="true" cancelText="暂不提示" @cancel="tipCancel"
		@confirm="tipClose" @close="tipClose"></u-modal>
	</view>
</template>

<script>
	import ryfStep from "@/components/ryf-step/step.vue"
	import {
		getMMC
	} from "@/api/correlation.js"
	import {
		getMeetingMonthly,
		meetingMonthlyCorrelation
	} from "@/api/tPoint.js"

	import request from '@/utils/request.js'
	
	const tipDict = {
		"smokeGloss": "光泽",
		"smokeAroma": "香气",
		"smokeHarmony": "谐调",
		"smokeImpure": "杂气",
		"smokeThrill": "刺激性",
		"smokeAftertaste": "余味",
	}
	export default {
		components: {
			ryfStep
		},
		props: {
			id: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {
				tabHead: [
					'光泽 5', '香气 32', '谐调 6', '杂气 12', '刺激性 20', '余味 25',
				],
				tableData: [],
				tableHeadData: [],
				submitName: "提交",
				tipShow: false, //填写规则不符合的提示
				tipText: "步长为0.5，请填写整数或小数部分为0.5",
				tipShowArr:{
					smokeGloss: true,
					smokeAroma: true,
					smokeHarmony: true,
					smokeImpure: true,
					smokeThrill: true,
					smokeAftertaste: true,
				},
				tipKey: ""
			}
		},
		methods: {
			getData() {
				this.tableData = [];
				this.tableHeadData = [];
				getMeetingMonthly({
					allId: this.id
				}).then(res => {
					if (res.code == 200) {
						const data = res.data || [];
						data.forEach(item => {
							if (item.status == '0') {
								this.tableHeadData.push(item)
							} else {
								this.tableData.push({...item, len:0.5 })
							}

						})

						console.log(this.tableHeadData)

						this.submitName = data[0].meetingMonthlyCorrelationRep.status == '0' ? '提交' : '已提交'
					}

				})

			},
			async change(e) {
				console.log(e)
				// return
				// return false
				const index = JSON.parse(e.target.dataset.index)

				const data = this.tableData[index].meetingMonthlyCorrelationRep
				console.log("data**********",data);
				let a = data.smokeAftertaste ? data.smokeAftertaste : 0
				let b = data.smokeAroma ? data.smokeAroma : 0
				let c = data.smokeGloss ? data.smokeGloss : 0
				let d = data.smokeHarmony ? data.smokeHarmony : 0
				let f = data.smokeImpure ? data.smokeImpure : 0
				let g = data.smokeThrill ? data.smokeThrill : 0


				data.smokeTotal = a * 1 + b * 1 + c * 1 + d * 1 + f * 1 + g * 1

				if (data.status == '1') {
					uni.showToast({
						title: '已提交的数据不能修改',
						icon: 'none',
						mask: true
					})

					await this.getData()
					return false
				}
				meetingMonthlyCorrelation({
					loading: false,
					...data
				}).then(res => {
					if (res.code == 200) {
						// uni.showToast({title: '修改成功',	icon: 'none',mask: true})
					}

				})

			},
			/** 光泽*/
			smokeGlossBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				const key = 'smokeGloss'
				let loop = this.checkValue(form, key, len, 0, 5)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/** 香气*/
			smokeAromaBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				const key = 'smokeAroma'
				let loop = this.checkValue(form, key, len, 0, 32)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/** 谐调*/
			smokeHarmonyBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				let key = 'smokeHarmony'
				let loop = this.checkValue(form, key, len, 0, 6)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/** 杂气*/
			smokeImpureBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				let key = 'smokeImpure'
				let loop = this.checkValue(form, key, len, 0, 12)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/** 刺激性*/
			smokeThrillBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				let key = 'smokeThrill'
				let loop = this.checkValue(form, key, len, 0, 20)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/** 余味*/
			smokeAftertasteBlur(item) {
				let form = item.meetingMonthlyCorrelationRep
				let len = 5 //步长 * 10
				let key = 'smokeAftertaste'
				let loop = this.checkValue(form, key, len, 0, 25)
				if(!loop) {
					return
				}
				this.submitCell(form, key)
			},
			/**返回总值*/
			getSmokeTotal(form) {
				let keys = ['smokeGloss','smokeAroma','smokeHarmony','smokeImpure','smokeThrill','smokeAftertaste']
				let total = 0
				keys.forEach(key=>{
					let value = (form[key]||0)*1
					total += value
				})
				return total
			},
			/** 校验数据 */
			checkValue(form, key, len, min=0, max=100) {
				this.tipKey = key
				let value = form[key] * 1
				if(!value) return false;
				let remain = value * 10 % 10 % len
				if(remain !== 0||value < min || value > max) {
					form[key] = null
					this.submitCell(form, key)
					// tipText 步长为0.5，请填写整数或小数部分为0.5
					if(value < min || value > max) {
						this.tipText = `${tipDict[key]}取值区间为${min} ~ ${max}`
					} else {
						const a = (len/10).toFixed(1)
						this.tipText = `${tipDict[key]}的步长为${a}, 请填写整数或小数部分为${a}或${a}的整数倍`
					}
					this.tipShow = this.tipShowArr[key]
					return false
				}
				return true
			},
			/**更改单行数据*/
			async submitCell(form , key) {
				console.log("FORM", form)
				form.smokeTotal = this.getSmokeTotal(form)
				const res = await meetingMonthlyCorrelation({loading: false, ...form})
				if(res.code != 200) {
					form.smokeTotal = form.smokeTotal - form[key]*1
					form[key] = null
				}
			},
			tipClose() {
				this.tipShow = false
			},
			tipCancel() {
				this.tipShowArr[this.tipKey] = false
				console.log(this.tipShowArr)
				this.tipShow = false
			},
			
			async submit() {

				// 查询填写是否完整
				let isFull = true
				this.tableData.forEach(item => {
					const e = item.meetingMonthlyCorrelationRep
					if (!e.smokeAftertaste || !e.smokeAroma || !e.smokeGloss || !e.smokeHarmony || !e
						.smokeImpure || !e.smokeThrill) {
						isFull = false
						console.log(item);
					}
				})
				console.log(isFull);

				if (!isFull) {
					uni.showToast({
						title: '请检查您的输入是否完整',
						icon: 'none',
						mask: true
					})

					return false
				}



				this.$emit('c_submit', '单点评吸');
				// this.$emit('update:Index', 1);

				const res = await request.put('/ipad/meetingMonthlyCorrelation/submit/' + this.id, {
					allId: this.id
				})
				console.log(res);

				this.getData()

			},
		},
		mounted() {
			console.log(this.id)
			this.getData()

		}
	}
</script>

<style lang="scss" scoped>
	.cFont {

		color: #27B186;
		font-size: 11rpx;
	}

	.btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.btn {
			width: 116rpx;
			height: 26rpx;
			border-radius: 3.84rpx;
			text-align: center;
			line-height: 26rpx;
			font-size: 11rpx;
			font-weight: bold;
			color: #FFFFFF;
			background-image: url(../../../static/Rectangle24.png);
			background-size: cover;
			cursor: pointer;

			&:hover {
				opacity: 0.5;
			}

			&:last-child {
				background-image: url(../../../static/Rectangle113.png);
				margin-left: 41rpx;
			}
		}
	}

	.tabHead {
		height: 80rpx;
		background: #F3FFF9;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
		opacity: 1;
		padding: 7rpx 9rpx;
		display: flex;

		.tit {
			font-size: 11rpx;
			font-weight: bold;
			color: #6C9789;
		}

		.top {
			height: 17rpx;
			line-height: 17rpx;
		}

		.bot {
			display: flex;
			flex-wrap: wrap;
			// justify-content: space-between;
		}

		.p {
			font-size: 11rpx;
			color: #999999;
			line-height: 13rpx;
		}

		.left {
			width: 148rpx;

			.top {
				margin-bottom: 14rpx;
			}

			.bot {
				align-items: center;

				.p1 {
					width: 22rpx;
					margin-right: 27rpx;
				}
			}
		}

		.list {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			.top {
				margin-bottom: 8rpx;
				text-align: center;
			}

			.item {
				width: 16.6666%;

				.box {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					.i {
						width: 18rpx;
						height: 18rpx;
						background: #FFFFFF;
						border-radius: 4rpx 4rpx 4rpx 4rpx;
						font-size: 11rpx;
						line-height: 18rpx;
						text-align: center;
						color: #999999;
						font-weight: 400;
						margin-right: 4rpx;
						margin-bottom: 2rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
		}

		.right {
			width: 70rpx;
		}


	}

	.td {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>